<template>
  <div class="block">
    <el-row  >
      <el-col :span="24">
        <div class="top_block">
          <el-row type="flex" justify="center" class="query_block">
            <el-col :span="20">
              <el-select v-model="formdata.departmentId" placeholder="请选择部门" clearable>
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-col>
            <el-col :span="20" :push="5" >
              <el-select v-model="formdata.year" placeholder="请选择年份" clearable>
                  <el-option
                      v-for="item in yearsList"
                      :key="item.label"
                      :label="item.label"
                      :value="item.value">
                  </el-option>
              </el-select>
            </el-col>
            <el-col :span="8" :push="15" >
              <el-button icon="el-icon-search" circle @click="queryAttendanceByYear" ></el-button>
            </el-col>            
          </el-row>
        </div>
      </el-col>
    </el-row>
    <el-row type="flex" justify="center">
      <el-col :span="10">
        <div ref="myechart" class="echart_block"></div>
      </el-col>
    </el-row>

  </div>
</template>

<script>
import dept from '../../../api/department'
  export default {

    data(){
      return{
        options: [
          
        ],
        value: '',        
        yearsList:[],
        formdata:{
            departmentId:'',
            year:'',
            pageNum:1,
            pageSize:50000
        },
        dataAxis:[],
        data:[]

      }
    },
    created(){
      this.initYears()
      this.queryAllDept()
    },

    mounted() {
      this.setChart()
    },
    methods: {
      setChart() {
        var myChart = this.$echarts.init(this.$refs.myechart)
        let dataAxis = ['已打卡', '异常迟到', '未打卡', '请假', '其他'];
        let data = [
          { value: 54, name: '已打卡' },
          { value: 6, name: '异常迟到' },
          { value: 3, name: '未打卡' },
          { value: 10, name: '请假' },
          { value: 10, name: '其他' }
        ]
        // 指定图表的配置项和数据
        var option = {
        title: {
          text: '部门年度出勤统计',
          x: '300px'
        },
        tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          data: dataAxis
        },
        series: [{
          name: '部门年度出勤统计',
          type: 'pie',
          radius: '55%',
          center: ['55%', '47%'],
          label: {
            normal: {
              formatter: '{b}:{d}%',
              textStyle: {
                fontWeight: 'normal',
                fontSize: 15
              }
            }
          },
          data: data,
          itemStyle: {
            emphasis: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }]
      }

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option)
      },

      //设置日期列表
      initYears(){
          var myDate = new Date;
          var year = myDate.getFullYear();//获取当前年
          this.initSelectYear(year)
      },
      initSelectYear(year){
        this.yearsList = [];
        for(let i=0;i<30;i++){
          this.yearsList.push({value:(year - i),label:(year - i)});
        } 
      },
      //获取所有部门
      async queryAllDept(){
        const res = await dept.queryAllDept()
        if(res.data.code === '000'){
            res.data.data.forEach( dept =>{
                this.options.push(this.normalizer(dept))
            })   
        }
      },
      //转换指定格式
      normalizer(node) {
        return {
          value: node.departmentId,
          label: node.departmentName,
        }
      } ,
      async queryAttendanceByYear(){
        const res = await dept.departmentByUserReturnAttendance(this.formdata);

        if(res.data.code === '000'){
          var myChart = this.$echarts.init(this.$refs.myechart)
          let dataAxis = ['已打卡', '异常迟到', '未打卡', '请假'];
          let data = [
            { value: res.data.data.punchCard, name: '已打卡' },
            { value: res.data.data.latePunchCard, name: '异常迟到' },
            { value: res.data.data.noPunchCard, name: '未打卡' },
            { value: res.data.data.leave, name: '请假' }
          ]
          // 指定图表的配置项和数据
          var option = {
          title: {
            text: '部门'+this.formdata.year+'年度出勤统计',
            x: '300px'
          },
          tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
          },
          legend: {
            orient: 'vertical',
            left: 'left',
            data: dataAxis
          },
          series: [{
            name: '部门年度出勤统计',
            type: 'pie',
            radius: '55%',
            center: ['55%', '47%'],
            label: {
              normal: {
                formatter: '{b}:{d}%',
                textStyle: {
                  fontWeight: 'normal',
                  fontSize: 15
                }
              }
            },
            data: data,
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }]
        }
          // 使用刚指定的配置项和数据显示图表。
          myChart.setOption(option)          
        }else {
          var myChart = this.$echarts.init(this.$refs.myechart)
        let dataAxis = ['已打卡', '异常迟到', '未打卡', '请假', '其他'];
        let data = [
          { value: 0, name: '已打卡' },
          { value: 0, name: '异常迟到' },
          { value: 0, name: '未打卡' },
          { value: 0, name: '请假' },
          { value: 0, name: '其他' }
        ]          
        // 指定图表的配置项和数据
          var option = {
          title: {
            text: '部门年度出勤统计',
            x: '300px'
          },
          tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
          },
          legend: {
            orient: 'vertical',
            left: 'left',
            data: dataAxis
          },
          series: [{
            name: '部门年度出勤统计',
            type: 'pie',
            radius: '55%',
            center: ['55%', '47%'],
            label: {
              normal: {
                formatter: '{b}:{d}%',
                textStyle: {
                  fontWeight: 'normal',
                  fontSize: 15
                }
              }
            },
            data: data,
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }]
        }          
          myChart.setOption(option)  

          this.$message.warning(res.data.msg)
        }
      }   
    },
  }
</script>

<style lang="scss" scoped>
.block{
  .top_block{
    width: 100%;
    height: 80px;
    background-color: #fff;
    position: relative;
    .query_block{
      position: absolute;
      left: 10%;
      top: 25%;
    }
  }
  .echart_block{
    margin-top: 150px;
    width: 600px; 
    height: 400px;
  }
}
</style>

